<template>
  <div id="shop-card" class="shop-part">
	  <nuxt-link :to="'/shop/' + shopId" class="shop-href">
		  <div class="shop-show">
			  <div class="shop-icon"><img :src="shop.shop_logo"/></div>
			  <span class="shop-name">{{ shop.shop_name }}</span>
		  </div>
		  <div class="shop-tab">
				<span class="tab">
					<div class="num">{{ shop.shop_collect }}</div>
					<div class="text">关注人数</div>
					<div class="vertical-line"></div>
				</span>
			  <span class="tab">
					<div class="num">{{ shop.goods_num }}</div>
					<div class="text">全部商品</div>
					<div class="vertical-line"></div>
				</span>
			  <span class="tab">
					<div class="num">{{ shop.shop_credit }}</div>
					<div class="text">店铺评分</div>
				</span>
		  </div>
	  </nuxt-link>
    <div class="shop-footer">
      <div class="shop-goods">
	      <nuxt-link :to="'/shop/goods-list?shop_id=' + shopId" class="shop-btn">
		      <i class="icon-shop all-goods"></i>
		      <span class="icon-text">全部商品</span>
	      </nuxt-link>
      </div>
      <div class="shop-go">
	      <nuxt-link :to="'/shop/' + shopId" class="shop-btn">
		      <i class="icon-shop go-shop"></i>
		      <span class="icon-text">进入店铺</span>
	      </nuxt-link>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import * as API_Shop from '@/api/shop'
  export default {
    name: "shop-card",
    props: ['shop-id'],
    data() {
      return {
        // 店铺基本信息
        shop: ''
      }
    },
    watch: {
      shopId(id) {
        API_Shop.getShopBaseInfo(id).then(response => {
          this.shop = response
        })
      }
    },
    mounted() {
      this.shopId && API_Shop.getShopBaseInfo(this.shopId).then(response => {
        this.shop = response
      })
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .shop-part {
    position: relative;
    overflow: hidden;
    padding: 10px;
    margin-top: 9px;
  }
  .shop-href {
    display: block;
    width: 100%;
    overflow: hidden;
    color: #000;
  }
  .shop-show {
    padding-right: 12px;
    width: 100%;
    overflow: hidden;
    .shop-icon {
      width: 80px;
      height: 26px;
      display: inline-block;
      border: 1px solid #d9d9d9;
      img {
        width: 80px;
        height: 26px;
      }
    }
    .shop-name {
      font-size: 14px;
      color: #222;
      margin: 7px 2px 0 7px;
      display: inline-block;
      vertical-align: top;
      line-height: 16px;
      max-width: 66%;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
  .shop-tab {
    width: 100%;
    position: relative;
    overflow: hidden;
    float: left;
    padding-top: 8px;
    .tab {
      width: 33.3%;
      float: left;
      text-align: center;
      overflow: hidden;
      position: relative;
      .num {
        font-size: 16px;
        line-height: 16px;
        color: #252525;
      }
      .text {
        margin-top: 3px;
        font-size: 10px;
        line-height: 18px;
        color: #848689;
      }
      .vertical-line {
        position: absolute;
        border-right: 1px solid #d7d7d7;
        height: 26px;
        right: 0;
        top: 50%;
        margin-top: -13px;
      }
    }
  }
  .shop-footer {
    padding-top: 7px;
    overflow: hidden;
    .shop-goods, .shop-go {
      border-radius: 5px;
      border: 1px solid #d7d7d7;
      width: 48%;
      font-size: 0;
    }
    .shop-goods {
      float: left;
    }
    .shop-go {
      float: right;
    }
    .shop-btn {
      text-align: center;
      width: 100%;
      display: block;
      font-size: 0;
      height: 32px;
    }
    .icon-shop {
      display: inline-block;
      width: 15px;
      height: 15px;
      margin-right: 4px;
      vertical-align: top;
      margin-top: 8px;
    }
    .icon-text {
      display: inline-block;
      font-size: 13px;
      color: #686868;
      line-height: 14px;
      vertical-align: top;
      margin-top: 9px;
    }
    .all-goods {
      background: url("") no-repeat center/contain;
    }
    .go-shop {
      background: url("") no-repeat center/contain;
    }
  }
</style>
